import React, { useState } from "react";
import { Segmented } from "antd";
import { createStyles } from "antd-style";

import AccountLogin from "./AccountLogin";
import WeChatLogin from "./WeChatLogin";

const EnumLoginType = {
  weChat: "weChat",     // 微信登录
  account: "account",   // 账号密码
};

const EnumLoginTypeList = [
  { label: "微信登录", value: EnumLoginType.weChat },
  { label: "账号密码", value: EnumLoginType.account },
];

const LoginBox: React.FC = () => {
  const { styles } = useStyle();
  const [loginType, setLoginType] = useState(EnumLoginType.weChat);

  return <div className={styles.loginBox}>
    <Segmented options={EnumLoginTypeList} value={loginType} onChange={(value) => setLoginType(value)} block style={{marginBottom: 40}} />

    {(() => {
      switch (loginType) {
        case EnumLoginType.weChat:
          return <WeChatLogin />

        case EnumLoginType.account:
          return <AccountLogin />
      }
    })()}
  </div>
}

export default LoginBox;

const useStyle = createStyles(({ css }) => ({
  loginBox: css`
    width: 450px;
    height: 100%;
    padding: 70px 40px 0;
  `
}))
